<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Zapatec Utils Overview
</title>
<link rel ="stylesheet" type="text/css" href="../../../zapatec/utils/jsdocs/stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="colorpicker.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onLoad="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="../../../zapatec/utils/jsdocs/index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="../../../zapatec/utils/jsdocs/overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="../../../zapatec/utils/jsdocs/allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>colorpicker.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		Color Picker widget class derived from Widget. See description
 of base Widget class at http://trac.zapatec.com:8000/trac/wiki/Widget.

 <pre>
 Copyright (c) 2004-2006 by Zapatec, Inc.
 http://www.zapatec.com
 1700 MLK Way, Berkeley, California,
 94709, U.S.A.
 All rights reserved.
 </pre><BR/><BR/>
	
</p>

<hr>


    <table border="1" cellpadding="3" cellspacing="0" width="100%">
    <tr bgcolor="#CCCCFF" class="TableHeadingColor">
    <td colspan=2><font size="+2">
    
        <b>Class Summary</b>
    
    </font></td>
    </tr>
    
    <tr bgcolor="white" class="TableRowColor">
    <td width="15%"><b><a href="../../../zapatec/utils/jsdocs/Zapatec/ColorPicker.html">Zapatec.ColorPicker</a></b></td>
    <td>&nbsp;</td>
    </tr>
    
    </table>
    <hr/> 


<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/* $Id: colorpicker.js 7599 2007-07-25 11:13:15Z roman $ */</span>
<span class="comment">/**
 * <span class="attrib">@fileoverview</span> Color Picker widget class derived from Widget. See description
 * of base Widget class at http://trac.zapatec.com:8000/trac/wiki/Widget.
 *
 * &lt;pre&gt;
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * &lt;/pre&gt;
 */</span>

<span class="comment">/**
* Zapatec ColorPicker object. Creates the element for selecting color
* Displays 216 predefined colors palette, three Sliders and three input fields
* for red, green and blue channels and input field for hex color value.
* <span class="attrib">@param</span> config [object] - color picker config.
*
* Constructor recognizes the following properties of the config object
* \code
*	property name			| description
*------------------------------------------------------------------------------
*	button						| [string or object] Reference to DOM element.  Optional
*										| Click on this element will popup color picker.
*	inputField				| [string or object] Reference to DOM element. Optional
*										| If option is given - value will be written into this
*										| element.
*	color							| [string] Initial color, format: '#FFCCFF', Optional,
*										| default '#000000'
*	title 						| [string] Title of color picker. Optional, default 'Color Picker'
*	offset  					| [number] offset between button and picker. Optional,
*										| default 10 pixels
* singleClick 			| [boolean] This defines how to handle color selecting. 
*             			| If true, color is selected on single click on palette. 
*             			| If false, on click color is set active, and selecting is attached to double click.
* lang							| Set language for color picker. Use three letters short form of the language name as a parameter.
* handleButtonClick | Set to true if you want to handle button clicks by yourself, especially for use in another widgets.
* 
* \endcode
*/</span>


<span class="comment">/**
 * ColorPicker class.
 *
 * <span class="attrib">@constructor</span>
 * <span class="attrib">@extends</span> Zapatec.Widget
 * <span class="attrib">@param</span> {object} objArgs User configuration
 */</span>
Zapatec.ColorPicker = <span class="reserved">function</span>(objArgs) {
	<span class="reserved">if</span> (arguments.length == 0) {
		objArgs = {};
	}
	Zapatec.ColorPicker.SUPERconstructor.call(<span class="reserved">this</span>, objArgs);
};

<span class="comment">/**
 * Unique static id of the widget class. Gives ability for Zapatec#inherit to
 * determine and store path to this file correctly when it is included using
 * Zapatec#include. When this file is included using Zapatec#include or path
 * to this file is gotten using Zapatec#getPath, this value must be specified
 * as script id.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.id = <span class="literal">'Zapatec.ColorPicker'</span>;
<span class="comment">// Inherit Widget</span>
Zapatec.inherit(Zapatec.ColorPicker, Zapatec.Widget);

<span class="comment">// Include Zapatec.SliderWidget</span>
Zapatec.include(Zapatec.zapatecPath+<span class="literal">'../zpslider/src/slider.js'</span>,
		<span class="literal">'Zapatec.SliderWidget'</span>);
Zapatec.Transport.include(Zapatec.zapatecPath + <span class="literal">'../zpextra/lang/colorpicker/eng.js'</span>);

<span class="comment">/**
 * Converts decimal value of channel color to hexadecimal value
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {number} dec Decimal color channel value
 * <span class="attrib">@type</span> string
 * <span class="attrib">@return</span> Hexadecimal value of channel color
 */</span>
Zapatec.ColorPicker.convertChannelColorToHex = <span class="reserved">function</span> (dec) {
	var hexChars = <span class="literal">"0123456789ABCDEF"</span>;
	<span class="reserved">if</span> (dec &gt; 255) {
		<span class="reserved">return</span> null;
	}
	var i = dec % 16;
	var j = (dec - i) / 16;
	var result = hexChars.charAt(j);
	result += hexChars.charAt(i);
	<span class="reserved">return</span> result;
}

<span class="comment">/**
 * Converts hexadecimal value of color to object with properties:
 * red, green, blue for color channels
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {string} hec Hexadecimal color value
 * <span class="attrib">@type</span> object
 * <span class="attrib">@return</span> Object that contains values for color channels
 */</span>
Zapatec.ColorPicker.convertHexToColorObject = <span class="reserved">function</span> (hex) {
	var hexChars = <span class="literal">"0123456789ABCDEF"</span>;
	var red, green, blue;
	<span class="reserved">if</span> (hex.match(/#[0123456789ABCDEF]{6}/i)) {
		red = hexChars.indexOf(hex.charAt(1))*16+
			  hexChars.indexOf(hex.charAt(2));
		green = hexChars.indexOf(hex.charAt(3))*16+
				hexChars.indexOf(hex.charAt(4));
		blue = hexChars.indexOf(hex.charAt(5))*16+
			   hexChars.indexOf(hex.charAt(6));
	} <span class="reserved">else</span> <span class="reserved">if</span> (hex.match(/[0123456789ABCDEF]{6}/i)) {
		red = hexChars.indexOf(hex.charAt(0))*16+
			  hexChars.indexOf(hex.charAt(1));
		green = hexChars.indexOf(hex.charAt(2))*16+
				hexChars.indexOf(hex.charAt(3));
		blue = hexChars.indexOf(hex.charAt(4))*16+
			   hexChars.indexOf(hex.charAt(5));
	} <span class="reserved">else</span> {
		red = 0; green = 0; blue = 0;
	}

	<span class="reserved">return</span> {red:red,green:green,blue:blue};
}


<span class="comment">/**
 * Initializes object.
 *
 * <span class="attrib">@param</span> {object} objArgs User configuration
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(objArgs) {
	var self = <span class="reserved">this</span>;
	<span class="comment">// Call init method of superclass</span>
	Zapatec.ColorPicker.SUPERclass.init.call(<span class="reserved">this</span>, objArgs);
	<span class="comment">// Generates HTML for ColorPicker</span>
	<span class="reserved">if</span> (Zapatec.windowLoaded) {
		<span class="reserved">this</span>.create();
	} <span class="reserved">else</span> {
		Zapatec.Utils.addEvent(window, <span class="literal">"load"</span>, <span class="reserved">function</span>() {
			self.create();
		});
	};
};

<span class="comment">/**
 * Configures the widget. Gets called from init and reconfigure methods of
 * superclass.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} objArgs User configuration
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(objArgs) {
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'button'</span>, null);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'handleButtonClick'</span>, true);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'inputField'</span>, null);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'color'</span>,<span class="literal">'#000000'</span>);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'title'</span>);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'offset'</span>,10);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'singleClick'</span>,false);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'themePath'</span>, Zapatec.zapatecPath +
										 <span class="literal">'../zpextra/themes/colorpicker/'</span>);
										 
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'langId'</span>, Zapatec.ColorPicker.id);
	<span class="reserved">this</span>.defineConfigOption(<span class="literal">'lang'</span>, <span class="literal">"eng"</span>);

	Zapatec.ColorPicker.SUPERclass.configure.call(<span class="reserved">this</span>, objArgs);

	<span class="comment">// defines field to protect configuration value from changes</span>
	<span class="reserved">this</span>.currentColor = <span class="reserved">this</span>.config.color;

	<span class="comment">// Gets button and inputField if they are string ID values</span>
	<span class="reserved">this</span>.config.button = Zapatec.Widget.getElementById(<span class="reserved">this</span>.config.button);
	<span class="reserved">this</span>.config.inputField = Zapatec.Widget.getElementById(<span class="reserved">this</span>.config.inputField);

	<span class="comment">// Predefined colors</span>
	<span class="reserved">this</span>.allColors = [
			[<span class="literal">'000000'</span>, <span class="literal">'003300'</span>, <span class="literal">'006600'</span>, <span class="literal">'009900'</span>, <span class="literal">'00CC00'</span>, <span class="literal">'00FF00'</span>,
			<span class="literal">'330000'</span>, <span class="literal">'333300'</span>, <span class="literal">'336600'</span>, <span class="literal">'339900'</span>, <span class="literal">'33CC00'</span>, <span class="literal">'33FF00'</span>,
			<span class="literal">'660000'</span>, <span class="literal">'663300'</span>, <span class="literal">'666600'</span>, <span class="literal">'669900'</span>, <span class="literal">'66CC00'</span>, <span class="literal">'66FF00'</span>],
			[<span class="literal">'000033'</span>, <span class="literal">'003333'</span>, <span class="literal">'006633'</span>, <span class="literal">'009933'</span>, <span class="literal">'00CC33'</span>, <span class="literal">'00FF33'</span>,
			<span class="literal">'330033'</span>, <span class="literal">'333333'</span>, <span class="literal">'336633'</span>, <span class="literal">'339933'</span>, <span class="literal">'33CC33'</span>, <span class="literal">'33FF33'</span>,
			<span class="literal">'660033'</span>, <span class="literal">'663333'</span>, <span class="literal">'666633'</span>, <span class="literal">'669933'</span>, <span class="literal">'66CC33'</span>, <span class="literal">'66FF33'</span>],
			[<span class="literal">'000066'</span>, <span class="literal">'003366'</span>, <span class="literal">'006666'</span>, <span class="literal">'009966'</span>, <span class="literal">'00CC66'</span>, <span class="literal">'00FF66'</span>,
			<span class="literal">'330066'</span>, <span class="literal">'333366'</span>, <span class="literal">'336666'</span>, <span class="literal">'339966'</span>, <span class="literal">'33CC66'</span>, <span class="literal">'33FF66'</span>,
			<span class="literal">'660066'</span>, <span class="literal">'663366'</span>, <span class="literal">'666666'</span>, <span class="literal">'669966'</span>, <span class="literal">'66CC66'</span>, <span class="literal">'66FF66'</span>],
			[<span class="literal">'000099'</span>, <span class="literal">'003399'</span>, <span class="literal">'006699'</span>, <span class="literal">'009999'</span>, <span class="literal">'00CC99'</span>, <span class="literal">'00FF99'</span>,
			<span class="literal">'330099'</span>, <span class="literal">'333399'</span>, <span class="literal">'336699'</span>, <span class="literal">'339999'</span>, <span class="literal">'33CC99'</span>, <span class="literal">'33FF99'</span>,
			<span class="literal">'660099'</span>, <span class="literal">'663399'</span>, <span class="literal">'666699'</span>, <span class="literal">'669999'</span>, <span class="literal">'66CC99'</span>, <span class="literal">'66FF99'</span>],
			[<span class="literal">'0000CC'</span>, <span class="literal">'0033CC'</span>, <span class="literal">'0066CC'</span>, <span class="literal">'0099CC'</span>, <span class="literal">'00CCCC'</span>, <span class="literal">'00FFCC'</span>,
			<span class="literal">'3300CC'</span>, <span class="literal">'3333CC'</span>, <span class="literal">'3366CC'</span>, <span class="literal">'3399CC'</span>, <span class="literal">'33CCCC'</span>, <span class="literal">'33FFCC'</span>,
			<span class="literal">'6600CC'</span>, <span class="literal">'6633CC'</span>, <span class="literal">'6666CC'</span>, <span class="literal">'6699CC'</span>, <span class="literal">'66CCCC'</span>, <span class="literal">'66FFCC'</span>],
			[<span class="literal">'0000FF'</span>, <span class="literal">'0033FF'</span>, <span class="literal">'0066FF'</span>, <span class="literal">'0099FF'</span>, <span class="literal">'00CCFF'</span>, <span class="literal">'00FFFF'</span>,
			<span class="literal">'3300FF'</span>, <span class="literal">'3333FF'</span>, <span class="literal">'3366FF'</span>, <span class="literal">'3399FF'</span>, <span class="literal">'33CCFF'</span>, <span class="literal">'33FFFF'</span>,
			<span class="literal">'6600FF'</span>, <span class="literal">'6633FF'</span>, <span class="literal">'6666FF'</span>, <span class="literal">'6699FF'</span>, <span class="literal">'66CCFF'</span>, <span class="literal">'66FFFF'</span>],
			[<span class="literal">'990000'</span>, <span class="literal">'993300'</span>, <span class="literal">'996600'</span>, <span class="literal">'999900'</span>, <span class="literal">'99CC00'</span>, <span class="literal">'99FF00'</span>,
			<span class="literal">'CC0000'</span>, <span class="literal">'CC3300'</span>, <span class="literal">'CC6600'</span>, <span class="literal">'CC9900'</span>, <span class="literal">'CCCC00'</span>, <span class="literal">'CCFF00'</span>,
			<span class="literal">'FF0000'</span>, <span class="literal">'FF3300'</span>, <span class="literal">'FF6600'</span>, <span class="literal">'FF9900'</span>, <span class="literal">'FFCC00'</span>, <span class="literal">'FFFF00'</span>],
			[<span class="literal">'990033'</span>, <span class="literal">'993333'</span>, <span class="literal">'996633'</span>, <span class="literal">'999933'</span>, <span class="literal">'99CC33'</span>, <span class="literal">'99FF33'</span>,
			<span class="literal">'CC0033'</span>, <span class="literal">'CC3333'</span>, <span class="literal">'CC6633'</span>, <span class="literal">'CC9933'</span>, <span class="literal">'CCCC33'</span>, <span class="literal">'CCFF33'</span>,
			<span class="literal">'FF0033'</span>, <span class="literal">'FF3333'</span>, <span class="literal">'FF6633'</span>, <span class="literal">'FF9933'</span>, <span class="literal">'FFCC33'</span>, <span class="literal">'FFFF33'</span>],
			[<span class="literal">'990066'</span>, <span class="literal">'993366'</span>, <span class="literal">'996666'</span>, <span class="literal">'999966'</span>, <span class="literal">'99CC66'</span>, <span class="literal">'99FF66'</span>,
			<span class="literal">'CC0066'</span>, <span class="literal">'CC3366'</span>, <span class="literal">'CC6666'</span>, <span class="literal">'CC9966'</span>, <span class="literal">'CCCC66'</span>, <span class="literal">'CCFF66'</span>,
			<span class="literal">'FF0066'</span>, <span class="literal">'FF3366'</span>, <span class="literal">'FF6666'</span>, <span class="literal">'FF9966'</span>, <span class="literal">'FFCC66'</span>, <span class="literal">'FFFF66'</span>],
			[<span class="literal">'990099'</span>, <span class="literal">'993399'</span>, <span class="literal">'996699'</span>, <span class="literal">'999999'</span>, <span class="literal">'99CC99'</span>, <span class="literal">'99FF99'</span>,
			<span class="literal">'CC0099'</span>, <span class="literal">'CC3399'</span>, <span class="literal">'CC6699'</span>, <span class="literal">'CC9999'</span>, <span class="literal">'CCCC99'</span>, <span class="literal">'CCFF99'</span>,
			<span class="literal">'FF0099'</span>, <span class="literal">'FF3399'</span>, <span class="literal">'FF6699'</span>, <span class="literal">'FF9999'</span>, <span class="literal">'FFCC99'</span>, <span class="literal">'FFFF99'</span>],
			[<span class="literal">'9900CC'</span>, <span class="literal">'9933CC'</span>, <span class="literal">'9966CC'</span>, <span class="literal">'9999CC'</span>, <span class="literal">'99CCCC'</span>, <span class="literal">'99FFCC'</span>,
			<span class="literal">'CC00CC'</span>, <span class="literal">'CC33CC'</span>, <span class="literal">'CC66CC'</span>, <span class="literal">'CC99CC'</span>, <span class="literal">'CCCCCC'</span>, <span class="literal">'CCFFCC'</span>,
			<span class="literal">'FF00CC'</span>, <span class="literal">'FF33CC'</span>, <span class="literal">'FF66CC'</span>, <span class="literal">'FF99CC'</span>, <span class="literal">'FFCCCC'</span>, <span class="literal">'FFFFCC'</span>],
			[<span class="literal">'9900FF'</span>, <span class="literal">'9933FF'</span>, <span class="literal">'9966FF'</span>, <span class="literal">'9999FF'</span>, <span class="literal">'99CCFF'</span>, <span class="literal">'99FFFF'</span>,
			<span class="literal">'CC00FF'</span>, <span class="literal">'CC33FF'</span>, <span class="literal">'CC66FF'</span>, <span class="literal">'CC99FF'</span>, <span class="literal">'CCCCFF'</span>, <span class="literal">'CCFFFF'</span>,
			<span class="literal">'FF00FF'</span>, <span class="literal">'FF33FF'</span>, <span class="literal">'FF66FF'</span>, <span class="literal">'FF99FF'</span>, <span class="literal">'FFCCFF'</span>, <span class="literal">'FFFFFF'</span>]
			];

};

Zapatec.ColorPicker.<span class="reserved">prototype</span>.DEFAULT_SLIDER_WIDTH = 362;


<span class="comment">/**
 * Creates HTML for Color Picker
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.create = <span class="reserved">function</span>() {
	var self = <span class="reserved">this</span>;
	
	<span class="comment">// is used to process document onClick</span>
	<span class="reserved">this</span>.isShown = false;
	<span class="reserved">this</span>.sizeCalculated = false;

	<span class="reserved">this</span>.container = Zapatec.Utils.createElement(<span class="literal">"div"</span>);
	document.body.insertBefore(<span class="reserved">this</span>.container,document.body.firstChild);
	<span class="reserved">this</span>.container.className = <span class="reserved">this</span>.getClassName({prefix: <span class="literal">"zpColorPicker"</span>, suffix: <span class="literal">"Container"</span>});
	<span class="reserved">this</span>.container.id = <span class="literal">"zpColorPicker"</span> + <span class="reserved">this</span>.id + <span class="literal">"Container"</span>;
	<span class="reserved">this</span>.container.onclick = <span class="reserved">function</span> () {
		self.isShown = true;
	}

	<span class="comment">// Header DIV</span>
	<span class="reserved">this</span>.container.header = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container);
	<span class="reserved">this</span>.container.header.className = <span class="literal">"header"</span>;


	var titleDiv = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.header);
	titleDiv.className = <span class="literal">'title'</span>;
	titleDiv.innerHTML = <span class="reserved">this</span>.config.title?<span class="reserved">this</span>.config.title:<span class="reserved">this</span>.getMessage(<span class="literal">'windowTitle'</span>);
	titleDiv.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"Title"</span>;

	<span class="comment">// make picker window draggable</span>
	new Zapatec.Utils.Draggable(<span class="reserved">this</span>.container,{
		handler: titleDiv,
		dragCSS:<span class="literal">'dragging'</span>, 
		onDragInit : <span class="reserved">function</span> () {
			self.isShown = true;
		},
		onDragMove: <span class="reserved">function</span> () {
			<span class="reserved">if</span> (self.WCH) {
				self.WCH.style.left = self.container.style.left;
				self.WCH.style.top = self.container.style.top;
			}
		}
	});

	var closeDiv = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.header);
	closeDiv.className = <span class="literal">'close'</span>;
	closeDiv.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"Close"</span>;
	closeDiv.onclick = <span class="reserved">function</span> (){
		self.hide();
	}

	<span class="comment">// Palette container</span>
	<span class="reserved">this</span>.container.fullPalette = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container,true);
	<span class="reserved">this</span>.container.fullPalette.className = <span class="literal">"fullPalette"</span>;

	<span class="comment">// RGB input fields container</span>
	<span class="reserved">this</span>.container.rgbFields = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container,true);
	<span class="reserved">this</span>.container.rgbFields.className = <span class="literal">"rgbFields"</span>;

	<span class="comment">// RGB input fields</span>
	var inputRedContainer =	Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.rgbFields, true);
	inputRedContainer.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'redFieldLabel'</span>)));
	<span class="reserved">this</span>.container.rgbFields.inputRed =	Zapatec.Utils.createElement(<span class="literal">"input"</span>, inputRedContainer, true);
	<span class="reserved">this</span>.container.rgbFields.inputRed.size = 3;
	<span class="reserved">this</span>.container.rgbFields.inputRed.maxLength = 3;
	<span class="reserved">this</span>.container.rgbFields.inputRed.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputRedField"</span>;

	var inputGreenContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.rgbFields, true);
	inputGreenContainer.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'greenFieldLabel'</span>)));
	<span class="reserved">this</span>.container.rgbFields.inputGreen = Zapatec.Utils.createElement(<span class="literal">"input"</span>, inputGreenContainer, true);
	<span class="reserved">this</span>.container.rgbFields.inputGreen.size = 3;
	<span class="reserved">this</span>.container.rgbFields.inputGreen.maxLength = 3;
	<span class="reserved">this</span>.container.rgbFields.inputGreen.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputGreenField"</span>;

	var inputBlueContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container.rgbFields, true);
	inputBlueContainer.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'blueFieldLabel'</span>)));
	
	<span class="reserved">this</span>.container.rgbFields.inputBlue = Zapatec.Utils.createElement(<span class="literal">"input"</span>, inputBlueContainer, true);
	<span class="reserved">this</span>.container.rgbFields.inputBlue.size = 3;
	<span class="reserved">this</span>.container.rgbFields.inputBlue.maxLength = 3;
	<span class="reserved">this</span>.container.rgbFields.inputBlue.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputBlueField"</span>;
	
	<span class="comment">// Table that contains palette</span>
	
	var imgSrc = Zapatec.ColorPicker.path+<span class="literal">'../zpextra/themes/colorpicker/px.gif'</span>;
	var paletteTableHTML = [];
	paletteTableHTML.push (<span class="literal">'&lt;table class="paletteTable" cellspacing="0" cellpadding="0"&gt;'</span>);
	paletteTableHTML.push (<span class="literal">'&lt;tbody&gt;'</span>);
	<span class="reserved">for</span> (var ii = 0; ii &lt; <span class="reserved">this</span>.allColors.length; ii++) {
		paletteTableHTML.push (<span class="literal">'&lt;tr&gt;'</span>);
		<span class="reserved">for</span> (var jj = 0; jj &lt; <span class="reserved">this</span>.allColors[ii].length; jj++) {
			<span class="reserved">if</span> (<span class="reserved">this</span>.config.singleClick) {
				paletteTableHTML.push (<span class="literal">'&lt;td id="zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj+<span class="literal">'" style="background-color: #'</span>+<span class="reserved">this</span>.allColors[ii][jj]+<span class="literal">'" onclick="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnDoubleClick\<span class="literal">',\'</span><span class="literal">'+this.allColors[ii][jj]+'</span>\<span class="literal">');" onmouseover="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOver\<span class="literal">',this);" onmouseout="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOut\<span class="literal">',this);"&gt;'</span> );
			} <span class="reserved">else</span> {
				paletteTableHTML.push (<span class="literal">'&lt;td id="zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj+<span class="literal">'" style="background-color: #'</span>+<span class="reserved">this</span>.allColors[ii][jj]+<span class="literal">'" onclick="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnClick\<span class="literal">',\'</span><span class="literal">'+this.allColors[ii][jj]+'</span>\<span class="literal">');" ondblclick="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnDoubleClick\<span class="literal">',\'</span><span class="literal">'+this.allColors[ii][jj]+'</span>\<span class="literal">');" onmouseover="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOver\<span class="literal">',this);" onmouseout="Zapatec.Widget.callMethod(\'</span><span class="literal">'+this.id+'</span>\<span class="literal">',\'</span>cellOnMouseOut\<span class="literal">',this);"&gt;'</span> );
			}
			paletteTableHTML.push (<span class="literal">'&lt;img src="'</span>+ imgSrc +<span class="literal">'" id="'</span>+<span class="literal">'zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj+<span class="literal">'image'</span>+<span class="literal">'" height="13" width="12"&gt;'</span>);
			paletteTableHTML.push (<span class="literal">'&lt;/td&gt;'</span>);
		}
		paletteTableHTML.push (<span class="literal">'&lt;/tr&gt;'</span>);
	}
	paletteTableHTML.push (<span class="literal">'&lt;/tbody&gt;'</span>);
	paletteTableHTML.push (<span class="literal">'&lt;/table&gt;'</span>);
	
	<span class="reserved">this</span>.container.fullPalette.innerHTML = paletteTableHTML.join(<span class="literal">""</span>); 

	<span class="reserved">this</span>.container.colorPreview = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container);
	<span class="reserved">this</span>.container.colorPreview.className = <span class="literal">"colorPreview"</span>;
	<span class="reserved">this</span>.container.colorPreview.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"ColorPreview"</span>;

	<span class="reserved">this</span>.container.buttonsContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container);
	<span class="reserved">this</span>.container.buttonsContainer.className = <span class="literal">"buttons"</span>;
	
	var okButton = Zapatec.Utils.createElement(<span class="literal">"button"</span>, <span class="reserved">this</span>.container.buttonsContainer);
	okButton.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'okButtonCaption'</span>)));
	okButton.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"OkButton"</span>;
	okButton.onclick = <span class="reserved">function</span> () {
		<span class="reserved">if</span> (self.config.inputField) {
			self.sendValueToinputField();
		}
		self.select();
	}
	var cancelButton = Zapatec.Utils.createElement(<span class="literal">"button"</span>, <span class="reserved">this</span>.container.buttonsContainer);
	cancelButton.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"CancelButton"</span>;
	cancelButton.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'cancelButtonCaption'</span>)));
	cancelButton.onclick = <span class="reserved">function</span> () {
		self.hide();
	}

	<span class="reserved">this</span>.container.hexFields = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container, true);
	<span class="reserved">this</span>.container.hexFields.className = <span class="literal">"hexFields"</span>;
	<span class="reserved">this</span>.container.hexFields.inputHex = Zapatec.Utils.createElement(<span class="literal">"input"</span>, <span class="reserved">this</span>.container.hexFields, true);
	<span class="reserved">this</span>.container.hexFields.inputHex.id = <span class="literal">"zpColorPicker"</span>+<span class="reserved">this</span>.id+<span class="literal">"InputHexField"</span>;
	<span class="reserved">this</span>.container.hexFields.inputHex.size = 7;
	<span class="reserved">this</span>.container.hexFields.inputHex.maxLength = 7;

	<span class="comment">// Slider containers</span>
	<span class="reserved">this</span>.container.slidersContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container, true);
	<span class="reserved">this</span>.container.slidersContainer.className = <span class="literal">"slidersContainer"</span>;
	var slidersTable = Zapatec.Utils.createElement(<span class="literal">"table"</span>, <span class="reserved">this</span>.container.slidersContainer, true);
	slidersTable.cellPadding = 1;
	slidersTable.cellSpacing = 0;
	var slidersTableBody = Zapatec.Utils.createElement(<span class="literal">"tbody"</span>, slidersTable, true);

	var redSliderRow = Zapatec.Utils.createElement(<span class="literal">"tr"</span>, slidersTableBody, true);
	<span class="reserved">this</span>.container.slidersContainer.redSliderLabelCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, redSliderRow);
	<span class="reserved">this</span>.container.slidersContainer.redSliderLabelCol.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'redFieldLabel'</span>)));
	<span class="reserved">this</span>.container.slidersContainer.redSliderSliderCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, redSliderRow);

	var greenSliderRow = Zapatec.Utils.createElement(<span class="literal">"tr"</span>, slidersTableBody, true);
	<span class="reserved">this</span>.container.slidersContainer.greenSliderLabelCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, greenSliderRow);
	<span class="reserved">this</span>.container.slidersContainer.greenSliderLabelCol.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'greenFieldLabel'</span>)));
	<span class="reserved">this</span>.container.slidersContainer.greenSliderSliderCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, greenSliderRow);

	var blueSliderRow = Zapatec.Utils.createElement(<span class="literal">"tr"</span>, slidersTableBody, true);
	<span class="reserved">this</span>.container.slidersContainer.blueSliderLabelCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, blueSliderRow);
	<span class="reserved">this</span>.container.slidersContainer.blueSliderSliderCol = Zapatec.Utils.createElement(<span class="literal">"td"</span>, blueSliderRow);
	<span class="reserved">this</span>.container.slidersContainer.blueSliderLabelCol.appendChild(document.createTextNode(<span class="reserved">this</span>.getMessage(<span class="literal">'blueFieldLabel'</span>)));
	
	<span class="comment">// Creating sliders (must be here because sliders needs parent elements</span>
	<span class="comment">// to be already created)</span>
	<span class="reserved">this</span>.createSliders();

	<span class="comment">// Input fields event handlers</span>
	<span class="reserved">this</span>.container.rgbFields.inputRed.onkeyup = <span class="reserved">function</span>(){
		var value = parseInt(<span class="reserved">this</span>.value);
		<span class="reserved">if</span> (isNaN(value)) {
			value = 0;
		} <span class="reserved">else</span> {
			<span class="reserved">this</span>.value = value;
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.value &lt; 0 ) {
			<span class="reserved">this</span>.value=0;
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.value &gt; 255 ) {
			<span class="reserved">this</span>.value=255;
		}
		self.sliders.red.setPos(<span class="reserved">this</span>.value);
	};
	<span class="reserved">this</span>.container.rgbFields.inputGreen.onkeyup = <span class="reserved">function</span>(){
		var value = parseInt(<span class="reserved">this</span>.value);
		<span class="reserved">if</span> (isNaN(value)) {
			value = 0;
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.value &lt; 0 ) {
			<span class="reserved">this</span>.value=0;
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.value &gt; 255 ) {
			<span class="reserved">this</span>.value=255;
		}
		self.sliders.green.setPos(<span class="reserved">this</span>.value);
	};
	<span class="reserved">this</span>.container.rgbFields.inputBlue.onkeyup = <span class="reserved">function</span>(){
		var value = parseInt(<span class="reserved">this</span>.value);
		<span class="reserved">if</span> (isNaN(value)) {
			value = 0;
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.value &lt; 0 ) {
			<span class="reserved">this</span>.value=0;
		}
		<span class="reserved">if</span> (<span class="reserved">this</span>.value &gt; 255 ) {
			<span class="reserved">this</span>.value=255;
		}
		self.sliders.blue.setPos(<span class="reserved">this</span>.value);
	};

	<span class="reserved">this</span>.container.hexFields.inputHex.onchange = <span class="reserved">function</span>(){
		self.setColor(<span class="reserved">this</span>.value);
	};

	<span class="comment">// Select color handler</span>
	<span class="reserved">this</span>.container.colorPreview.onclick = <span class="reserved">function</span>(){
		<span class="reserved">if</span> (self.config.inputField) {
			self.sendValueToinputField();
		}
		self.select();
	};

  <span class="reserved">if</span> (<span class="reserved">this</span>.config.handleButtonClick) {
    <span class="comment">// Show/hide picker event</span>
    <span class="reserved">this</span>.config.button.onclick = <span class="reserved">function</span>(){
      self.isShown = true;
      self.show();
    };
  }

	<span class="comment">// Hide picker on Esc key and on click at other document element</span>
	Zapatec.Utils.addEvent(document, <span class="literal">'keypress'</span>, <span class="reserved">function</span>(e) {
		<span class="reserved">if</span> (!e) {
			e = window.event;
		}
		<span class="reserved">if</span> (e.keyCode == 27) {
			self.hide()
		}
	});
	Zapatec.Utils.addEvent(document, <span class="literal">'click'</span>, <span class="reserved">function</span>() {
		<span class="reserved">if</span> (!self.isShown) {
			self.hide();
		}
		self.isShown = false;
	});

}
<span class="comment">/**
 * onClick handler for palette cell
 * <span class="attrib">@param</span> {Object} color
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnClick = <span class="reserved">function</span> (color){
	<span class="reserved">this</span>.setColor(color);
}

<span class="comment">/**
 * onDblClick handler for palette cell
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnDoubleClick = <span class="reserved">function</span> (color){
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.singleClick) {
		<span class="reserved">this</span>.setColor(color);
	}
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.inputField) {
		<span class="reserved">this</span>.sendValueToinputField();
	}
	<span class="reserved">this</span>.select();
}
<span class="comment">/**
 * onMouseOver handler for palette cell
 * <span class="attrib">@param</span> {Object} cell
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnMouseOver = <span class="reserved">function</span> (cell){
	Zapatec.Utils.removeClass(<span class="reserved">this</span>.highlightedCell, <span class="literal">'under'</span>);
	Zapatec.Utils.addClass(cell,<span class="literal">'under'</span>);
}
<span class="comment">/**
 * onMouseOut handler for palette cell
 * <span class="attrib">@param</span> {Object} cell
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.cellOnMouseOut = <span class="reserved">function</span> (cell){
		Zapatec.Utils.removeClass(cell,<span class="literal">'under'</span>);
}

<span class="comment">/**
 * Creates sliders and attaches handlers to them
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.createSliders = <span class="reserved">function</span>() {
	var self = <span class="reserved">this</span>;
	<span class="reserved">this</span>.sliders = {};
	
	<span class="reserved">this</span>.sliders.red = new Zapatec.Slider({
		div : <span class="reserved">this</span>.container.slidersContainer.redSliderSliderCol,
		length : 255,
		start: Zapatec.ColorPicker.convertHexToColorObject(<span class="reserved">this</span>.currentColor).red,
		step: 1,
		orientation : <span class="literal">'H'</span>,
		onChange : <span class="reserved">function</span> (pos) {
			self.container.rgbFields.inputRed.value = pos;
			self.previewColor();
		},
		newPosition: <span class="reserved">function</span>(){
			self.isShown = true;
		}
	});
	

	<span class="reserved">this</span>.sliders.green = new Zapatec.Slider({
		div : <span class="reserved">this</span>.container.slidersContainer.greenSliderSliderCol,
		length : 255,
		step: 1,
		start: Zapatec.ColorPicker.convertHexToColorObject(<span class="reserved">this</span>.currentColor).green,
		orientation : <span class="literal">'H'</span>,
		onChange : <span class="reserved">function</span> (pos) {
			self.container.rgbFields.inputGreen.value = pos;
			self.previewColor();
		},
		newPosition: <span class="reserved">function</span>(){
			self.isShown = true;
		}
	});

	<span class="reserved">this</span>.sliders.blue = new Zapatec.Slider({
		div : <span class="reserved">this</span>.container.slidersContainer.blueSliderSliderCol,
		length : 255,
		start: Zapatec.ColorPicker.convertHexToColorObject(<span class="reserved">this</span>.currentColor).blue,
		step: 1,
		orientation : <span class="literal">'H'</span>,
		onChange : <span class="reserved">function</span> (pos) {
			self.container.rgbFields.inputBlue.value = pos;
			self.previewColor();
		},
		newPosition: <span class="reserved">function</span>(){
			self.isShown = true;
		}
	});
}



<span class="comment">/**
 * Calculates top position for picker container based on position of button.
 * <span class="attrib">@private</span>
 * <span class="attrib">@type</span> number
 * <span class="attrib">@return</span> Top position in pixels
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.calculateTopPos = <span class="reserved">function</span>() {
	var elementOffset = Zapatec.Utils.getElementOffset(<span class="reserved">this</span>.config.button);
	var top = elementOffset.top - <span class="reserved">this</span>.container.clientHeight -
			  <span class="reserved">this</span>.config.offset;
	<span class="reserved">if</span> (top &lt;= 0) {
		top = elementOffset.top + <span class="reserved">this</span>.config.button.clientHeight +
			  <span class="reserved">this</span>.config.offset;
	}
	<span class="reserved">return</span> top;
}

<span class="comment">/**
 * Calculates left position for picker container based on position of button.
 * <span class="attrib">@private</span>
 * <span class="attrib">@type</span> number
 * <span class="attrib">@return</span> Left position in pixels
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.calculateLeftPos = <span class="reserved">function</span>() {
	var elementOffset = Zapatec.Utils.getElementOffset(<span class="reserved">this</span>.config.button);
	var left = elementOffset.left + <span class="reserved">this</span>.config.button.clientWidth +
			   <span class="reserved">this</span>.config.offset;
	<span class="reserved">if</span> ((left + <span class="reserved">this</span>.container.clientWidth) &gt;= document.body.clientWidth) {
		left =
		elementOffset.left - <span class="reserved">this</span>.container.clientWidth - <span class="reserved">this</span>.config.offset;
	}
	<span class="reserved">if</span> (left &lt;= 0) {
		left = elementOffset.left + <span class="reserved">this</span>.config.button.clientWidth +
			   <span class="reserved">this</span>.config.offset;
	}

	<span class="reserved">return</span> left;
}


Zapatec.ColorPicker.<span class="reserved">prototype</span>.calculateSize = <span class="reserved">function</span> () {
	
	var containerWidth;
	
	<span class="reserved">if</span> (<span class="reserved">this</span>.sliders.red.container) {
		containerWidth= <span class="reserved">this</span>.sliders.red.container.offsetWidth;
	} <span class="reserved">else</span> {
		containerWidth = <span class="reserved">this</span>.DEFAULT_SLIDER_WIDTH;
<span class="comment">//		containerWidth = this.container.slidersContainer.redSliderSliderCol.offsetWidth;</span>
	}

	<span class="reserved">this</span>.container.slidersContainer.style.width = (containerWidth+<span class="reserved">this</span>.container.slidersContainer.redSliderLabelCol.offsetWidth) +<span class="literal">'px'</span>;
	var basicWidth = <span class="reserved">this</span>.container.slidersContainer.offsetWidth;
	<span class="reserved">this</span>.container.style.width = (basicWidth + 2)+ <span class="literal">'px'</span>;
	
	<span class="reserved">this</span>.container.header.style.width = (basicWidth - 4)+<span class="literal">'px'</span>;
	
	<span class="reserved">this</span>.container.buttonsContainer.style.width = (basicWidth-<span class="reserved">this</span>.container.fullPalette.offsetWidth-<span class="reserved">this</span>.container.colorPreview.offsetWidth-4)+<span class="literal">'px'</span>;
	
	<span class="reserved">this</span>.container.rgbFields.style.width = (basicWidth-<span class="reserved">this</span>.container.fullPalette.offsetWidth - 13)+<span class="literal">'px'</span>;
	<span class="reserved">this</span>.container.hexFields.style.width = (basicWidth-<span class="reserved">this</span>.container.fullPalette.offsetWidth - 9)+<span class="literal">'px'</span>;
	
	
	<span class="reserved">this</span>.sizeCalculated = true;
}

<span class="comment">/**
 * Shows Color Picker
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.show = <span class="reserved">function</span> () {
	var self = <span class="reserved">this</span>;
	
	<span class="reserved">if</span> (!<span class="reserved">this</span>.sizeCalculated) {
		<span class="reserved">this</span>.calculateSize();
	}
	
	<span class="reserved">this</span>.container.style.visibility = <span class="literal">'visible'</span>;
	<span class="reserved">this</span>.container.style.left = <span class="reserved">this</span>.calculateLeftPos() + <span class="literal">"px"</span>;
	<span class="reserved">this</span>.container.style.top =  <span class="reserved">this</span>.calculateTopPos() + <span class="literal">"px"</span>;
	<span class="comment">// Windowed controls hider</span>
	<span class="reserved">this</span>.WCH = Zapatec.Utils.createWCH();
	<span class="reserved">if</span> (<span class="reserved">this</span>.WCH) {
		<span class="reserved">this</span>.WCH.style.zIndex = <span class="reserved">this</span>.container.style.zIndex;
		Zapatec.Utils.setupWCH_el(<span class="reserved">this</span>.WCH,<span class="reserved">this</span>.container);
	}
  <span class="reserved">if</span> (<span class="reserved">this</span>.config.handleButtonClick) {
    <span class="comment">// Attaches hide method to button</span>
    <span class="reserved">this</span>.config.button.onclick = <span class="reserved">function</span>(){
      self.isShown = false;
      self.hide();
    };
  }
  <span class="reserved">this</span>.highlightCell();
}


<span class="comment">/**
 * Hides ColorPicker
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.hide = <span class="reserved">function</span> () {
	var self = <span class="reserved">this</span>;
	<span class="reserved">this</span>.container.style.visibility = <span class="literal">'hidden'</span>;
	<span class="reserved">this</span>.container.style.left = <span class="literal">'-1000px'</span>;
	<span class="reserved">this</span>.container.style.top = <span class="literal">'-1000px'</span>;
	<span class="reserved">if</span> (<span class="reserved">this</span>.WCH){
		Zapatec.ScrollWithWindow.unregister(<span class="reserved">this</span>.WCH);
		<span class="reserved">if</span> (<span class="reserved">this</span>.WCH.outerHTML) {
			<span class="reserved">this</span>.WCH.outerHTML = <span class="literal">""</span>;
		} <span class="reserved">else</span> {
			Zapatec.Utils.destroy(<span class="reserved">this</span>.WCH);
		}
	}
<span class="comment">//	Zapatec.Utils.hideWCH(this.WCH);</span>
  <span class="reserved">if</span> (<span class="reserved">this</span>.config.handleButtonClick) {
    <span class="comment">// Attaches show method to button</span>
    <span class="reserved">this</span>.config.button.onclick = <span class="reserved">function</span>() {
      self.isShown = true;
      self.show();
    };
  }
}

<span class="comment">/**
 * Returns current color from picker.
 * <span class="attrib">@type</span> string
 * <span class="attrib">@return</span> Current color, format '#FFFFFF'
 */</span>

Zapatec.ColorPicker.<span class="reserved">prototype</span>.getColor = <span class="reserved">function</span> () {
	<span class="reserved">return</span> <span class="reserved">this</span>.currentColor;
}

<span class="comment">/**
 * Sets current color. Used to handle changes in Hex input field
 * Sets color channels values to sliders positions
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> [string] Color, format '#FFFFFF' or 'FFFFFF'
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.setColor = <span class="reserved">function</span> (hexcolor) {
	var color = Zapatec.ColorPicker.convertHexToColorObject(hexcolor);
	<span class="reserved">this</span>.sliders.red.setPos(color.red);
	<span class="reserved">this</span>.sliders.green.setPos(color.green);
	<span class="reserved">this</span>.sliders.blue.setPos(color.blue);
}

<span class="comment">/**
 * Displays color preview based on RGB input fields value
 * Sets hex field value and current color
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> [string] Color, format '#FFFFFF' or 'FFFFFF'
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.previewColor = <span class="reserved">function</span> () {
	var hexColor = <span class="literal">'#'</span> +
		   Zapatec.ColorPicker.convertChannelColorToHex(<span class="reserved">this</span>.container.rgbFields.inputRed.value) +
		   Zapatec.ColorPicker.convertChannelColorToHex(<span class="reserved">this</span>.container.rgbFields.inputGreen.value) +
		   Zapatec.ColorPicker.convertChannelColorToHex(<span class="reserved">this</span>.container.rgbFields.inputBlue.value);
	<span class="reserved">this</span>.container.colorPreview.style.backgroundColor = hexColor;
	<span class="reserved">this</span>.container.hexFields.inputHex.value = hexColor;
	<span class="reserved">this</span>.currentColor = hexColor;
}

<span class="comment">/**
 * Highlights palette cell if current color is in predefined colors collection
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.highlightCell = <span class="reserved">function</span> () {
	<span class="reserved">for</span> (var ii = 0; ii &lt; <span class="reserved">this</span>.allColors.length; ii++) {
		<span class="reserved">for</span> (var jj = 0; jj &lt; <span class="reserved">this</span>.allColors[ii].length; jj++) {
			var cell = document.getElementById(<span class="literal">'zpColorPicker'</span>+<span class="reserved">this</span>.id+<span class="literal">'Palette_'</span>+ii+<span class="literal">'_'</span>+jj);
			<span class="reserved">if</span> (((<span class="reserved">this</span>.currentColor.charAt(0) == <span class="literal">'#'</span>) &amp;&amp;
				(<span class="reserved">this</span>.currentColor == <span class="literal">'#'</span> + <span class="reserved">this</span>.allColors[ii][jj])) ||
				(<span class="reserved">this</span>.currentColor == <span class="reserved">this</span>.allColors[ii][jj])) {
				Zapatec.Utils.addClass(cell,<span class="literal">'under'</span>);
					<span class="reserved">this</span>.highlightedCell = cell;
			} <span class="reserved">else</span> {
				Zapatec.Utils.removeClass(cell,<span class="literal">'under'</span>);
			}
		}
	}
}

<span class="comment">/**
 * Sends selected color value to inputField element
 * If inputField is an INPUT or TEXTAREA - current color is set as its value
 * If inputField is a SELECT - options that corresponds to current color is
 * selected (if present)
 * Otherwise - current color is put into element's innerHtml
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.sendValueToinputField = <span class="reserved">function</span> () {
	<span class="reserved">if</span> (<span class="reserved">this</span>.config.inputField != null) {
		var tagName = <span class="reserved">this</span>.config.inputField.tagName.toUpperCase();
		switch (tagName) {
			case <span class="literal">"TEXTAREA"</span>:
			case <span class="literal">"INPUT"</span>:
				<span class="reserved">this</span>.config.inputField.value = <span class="reserved">this</span>.currentColor;
				break;
			case <span class="literal">"SELECT"</span>:
				<span class="reserved">for</span>(var i = 0; i &lt; <span class="reserved">this</span>.config.inputField.options.length; i++){
					<span class="reserved">if</span> (<span class="reserved">this</span>.config.inputField.options[i].value == <span class="reserved">this</span>.currentColor){
						<span class="reserved">this</span>.config.inputField.selectedIndex = i;
						break;
					}
				}

				break;
			default:
				<span class="reserved">this</span>.config.inputField.innerHTML = <span class="reserved">this</span>.currentColor;
				break;
		}
	}
}

<span class="comment">/**
 * Fires select event
 * Sends current color value to inputField element
 * Hides color picker
 * <span class="attrib">@private</span>
 */</span>
Zapatec.ColorPicker.<span class="reserved">prototype</span>.select = <span class="reserved">function</span> () {
	<span class="reserved">this</span>.fireEvent(<span class="literal">'select'</span>, <span class="reserved">this</span>.currentColor);
	<span class="reserved">this</span>.hide();
}


</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="../../../zapatec/utils/jsdocs/index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="../../../zapatec/utils/jsdocs/overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="../../../zapatec/utils/jsdocs/allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:18:39 2007</div>
</body>
</html>
